<template>
  <div>
    <h1>情况二:监视[ref]定义的[对象类型]数据</h1>
    <h2>姓名{{ person.name }}</h2>
    <h2>年龄{{ person.age }}</h2>
    <button @click="changName">修改名字</button>
    <button @click="changAge">修改年龄</button>
    <button @click="changePerson">修改整个人</button>
  </div>
</template>
<script setup lang="ts">
import { ref, watch } from "vue";

//数据
let person = ref({
  name: "张三",
  age: 18,
});

//方法
function changName() {
  person.value.name += "~";
} //改变的是对象的值(所以new,old相同)
function changAge() {
  person.value.age += 1;
} //改变的是对象的值(所以new,old相同)
function changePerson() {
  person.value = { name: "李四", age: 90 };
} //改变的是对象

//监视
//情况一:监视[ref]定义的[对象类型]数据,监视的是对象的地址值

//watch(第一参数{被监视的数据(person)},
//      第二参数{监视的回调(new,old)},
//      第三参数{配置对象(deep,immediate等等)})--<!!若想监视对象内部属性的变化,需要手动开启深度监视!!>
watch(
  person,
  (newperson, oldperson) => {
    console.log("person变化了", newperson, oldperson);
  },
  { deep: true, immediate: true }
  //deep      可以监视调用方法后数据的变化;(注意有个坑就是:old和new在读取数据时,若是直接在person上动刀,old和new是相同的例如changeAge与changeName的做法((不过不影响开发)))
  //immeidate 不用去管person是否变化,主要目的在于刚开始去查询new,(主要为)old的值(若无为undefined)
);
</script>
